<template>
    <el-dialog title="图片管理" :visible.sync="outerVisible" id="image">
        <el-row>
            <el-col :span="24" class="btn-cont">
                <el-button type="danger" size="medium" @click="delete_class">删除当前分类</el-button>
                <el-button type="primary" size="medium" @click="edit_class_visible = true">修改当前分类名称</el-button>
                <el-button type="primary" size="medium" @click="new_class_visible = true">添加新的分类</el-button>
                <el-button type="primary" size="medium" @click="upload_image">上传新图片</el-button>
            </el-col>
            <el-col :span="24" id="list">
                <el-tabs type="border-card" tab-position="left" style="height:500px;" @tab-click="current_click">

                    <el-tab-pane v-for="(item,k) in image_class" :key="k" :label="item.name">
                        <Content :class_id="item.id"></Content>
                    </el-tab-pane>

                </el-tabs>
            </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button @click="outerVisible = false">取 消</el-button>
            <el-button type="primary" @click="makeSureBtn">确 定</el-button>
        </div>

        <!-- 添加新的分类弹窗 -->
        <el-dialog width="30%" title="请填写新分类名称" :visible.sync="new_class_visible" append-to-body>
            <el-input type="name" v-model="new_class_name"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="add_new_class">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 修改分类弹窗 -->
        <el-dialog width="30%" title="请填写新分类名称" :visible.sync="edit_class_visible" append-to-body>
            <el-input type="name" v-model="new_class_name"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="edit_class">确 定</el-button>
            </div>
        </el-dialog>

    </el-dialog>
</template>

<script>
    import Content from './content.vue'
    export default {
        name: "messagePopUp",
        components:{
            Content,
        },
        data() {
            return {
                // 添加新的分类弹窗
                new_class_visible: false,
                // 修改分类弹窗
                edit_class_visible: false,
                // 删除分类弹窗
                delete_class_visible: false,
                // 弹出层开关
                outerVisible: false,
                // 图片分类
                image_class: [],
                // 新分类名称
                new_class_name: '',
                // 当前选中的分类id
                current_class: {},
                btnText1: '',
                btnText2: '',
            }
        },
        methods: {
            // 回调
            callbacks() {},
            // 确认按钮
            makeSureBtn() {
                this.title = '提示啥？'
                this.callbacks()
            },
            // 添加新的分类
            add_new_class() {
                if (this.new_class_name == '') {
                    this.$alert('内容不能为空', '提示')
                    return;
                }
                this.$as.image.class_add({
                    name: this.new_class_name
                }).then((res) => {
                    console.log('res', res.data);
                    this.new_class_visible = false;
                    this.$message.success(res.data.title)
                    this.get_class_list()
                }).catch((error) => {
                    this.$alert(error, '错误提示')
                })
            },
            // 获取分类列表
            get_class_list() {
                this.$as.image.class_list().then((res) => {
                    this.current_class = res.data[0]
                    console.log('current', this.current_id, res.data);
                    this.image_class = res.data
                })
            },
            // 分类列表被选中时
            current_click(d) {
                this.current_class = this.image_class[d.index]
            },
            // 修改分类列表名称
            edit_class(){
                if (this.new_class_name == '') {
                    this.$alert('内容不能为空', '提示')
                    return;
                }

                this.$as.image.class_edit({
                    id:this.current_class.id,
                    name: this.new_class_name
                }).then((res) => {
                    console.log('res', res.data);
                    this.edit_class_visible = false;
                    this.$message.success(res.data)
                    this.get_class_list()
                }).catch((error) => {
                    this.$alert(error, '错误提示')
                })
            },
            // 删除分类列表
            delete_class(){
                this.$alert('一定要删除 '+this.current_class.name+' 分类吗？',
                    {
                        confirmButtonText:'确认删除',
                        callback:(action) => {
                            this.$as.image.class_delete({id:this.current_class.id}).then((res) => {
                                console.log('delete',res);
                                this.$message.success(res.data)
                                this.get_class_list()   
                            })
                            console.log('action',action);
                        }
                    }
                )

            },
            // 上传图片
            upload_image() {
                console.log('upload', );
            }
        },
        created: function() {
            // 获取图片分类列表
            this.get_class_list()
        }
    }
</script>

<style scoped lang="scss">
    #image {
        .btn-cont {
            text-align: right;
            padding-bottom: 10px;
        }

        #list {
            height: 500px;
        }
    }
</style>